<template>
  <button v-on:click="testVOn">v-on</button>
  <br>
  <br>
  <!--
  v-on:click简写成@click
  如果不显式传参，则会向事件处理函数默认传递事件对象
  -->
  <button @click="testVOn">v-on可以简写成@</button>
  <br>
  <br>
  <!--
  如果显式传参，则不再向事件处理函数默认传递事件对象
  -->
  <button @click='testClick1("testClick1")'>给事件处理函数传参</button>
  <br>
  <br>
   <!--
  可以在模板中通过$event显式访问到事件对象
  -->
  <button @click='testClick2("testClick2", $event)'>给事件处理函数传参</button>

  <!--事件冒泡-->
  <div class="container" @click="clickcontainer">
    <div class="inner" @click.stop="clickInner"></div>
  </div>

  <!--
  事件修饰符
  https://www.yuque.com/yangzhi-u0ca4/dkbbld/cib4y6tnb070tph4
  -->
  <!--v-once-->
  <button @click.once="testVOnce">v-once</button>


</template>
<script setup>
function testVOn(e) {
  console.log("Click v-on", e)
}

function testClick1(p) {
  console.log("Click v-on", p)
}

function testClick2(p, e) {
  console.log("Click v-on", p, e)
}

function clickcontainer() {
  console.log("container is clicked")
}


function clickInner(event) {
  console.log("inner is clicked")
}


function testVOnce() {
  console.log("testVOnce is clicked")

}



</script>

<style scoped>
.container {
  width: 200px;
  height: 200px;
  background-color: greenyellow;
}
.inner {
  width: 100px;
  height: 100px;
  background-color: purple;
}




</style>